<!DOCTYPE html>
<html lang="en" style="height:100%">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>QHR订单</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../../css/yzl.css" />
    <link rel="stylesheet" type="text/css" href="../../css/vant.css" />
    <!-- <link rel="stylesheet" href="../../css/sqc.css"> -->
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        input{
            outline:none;
        }
        .order-tab .van-tabs__nav{
            padding: 0 0 !important;
        }
        .order-tab .van-tab{
            width: 20%;
            padding: 0px 0px!important;
        }
        .order-tab .van-ellipsis{
            font-size: 12px;
        }
        .order-tab .van-tabs--line .van-tabs__wrap{
            width: 100%;
        }

        .tap_active:after {
            content: '';
            position: absolute;
            left: 36%;
            top: auto;
            bottom: 0;
            right: auto;
            height: 3px;
            width: 23%;
            border-radius: 8px;
            background-color: #172E71;
        }
        .menu-top-tap {
            height: 44px;
            line-height: 40px;
            text-align: center;
            background: #fff;
            width: 100%;
            display: flex;
        }
        .menu-top-tap .tap-item {
            /*float:left;*/
            text-align: center;
            margin: 0 auto;
            flex: 1;
            display: inline-block;
            height: 44px;
            line-height: 40px;
            position: relative;
            color: #333;
        }
        .menu-top-tap .tap_active {
            color: #333;
            font-weight: bold;
        }
    </style>
</head>

<body style="background: #f7f4f2;">
<div id="blank" class="header" v-cloak>
    <div v-back.tapmode class="back"></div>
    <span class="title">QHR订单</span>
</div>
<div id="app" style="padding-top: 55px;"  v-cloak>
    <div class="QHR-order">
        <div class="order-tab">
            <div class="menu-top-tap">
                <div class="tap-item" :class="{tap_active:state == 1}" v-myclick="[1, changestate]">买入订单</div>
                <div class="tap-item" :class="{tap_active:state == 2}" v-myclick="[2, changestate]">待付款</div>
                <div class="tap-item" :class="{tap_active:state == 3}" v-myclick="[3, changestate]">待收款</div>
                <div class="tap-item" :class="{tap_active:state == 4}" v-myclick="[4, changestate]">已完成</div>
                <div class="tap-item" :class="{tap_active:state == 5}" v-myclick="[5, changestate]">已取消</div>
            </div>
            <div class="change-order" >
                <ul v-show="state==1">
                    <li class="change-order-li" style="margin-bottom: 12px" v-for='(list, index) in purchase_con' :key='index'>
                        <div class="stats-head">
                            <div>
                                <div class="stats-head-zi">{{hide_name_two(list.nickname)}}</div>
                                <div class="stats-head-name">{{hide_name(list.nickname)}}</div>
                            </div>
                            <div class="stats-order-time">{{list.createTime}}</div>
                        </div>
                        <div class="order-info">
                            <div style="margin-bottom: 15px">求购数量&nbsp;<span style="color: #333">{{list.tradeNum}}QHR</span></div>
                            <div style="margin-bottom: 15px">单价&nbsp;<span style="color: #333">{{list.totalPrice}}CNY</span></div>
                            <div>预付总额&nbsp;<span style="color: #333">{{(list.totalPrice)*(list.tradeNum)}} QHR</span></div>
                        </div>
                        <div class="order-info-watch">
                            <div class="order-info-cancel" v-myclick="[list.orderNo, cancel_order]">取消订单</div>
                            <div class="order-info-details" v-open-win="{orderid:list.orderNo}" vurl="buyorder">订单详情</div>
                        </div>
                    </li>
                </ul>
                <ul class="pending-payment" v-show="state==2">
                    <li class="change-order-li" style="margin-bottom: 12px" v-for='(list, index) in pending_payment_con' :key='index'>
                        <div class="stats-head">
                            <div>
                                <div class="stats-head-zi">{{hide_name_two(list.sellNickname)}}</div>
                                <div class="stats-head-name">{{hide_name(list.sellNickname)}}</div>
                            </div>
                            <div class="stats-order-time">{{list.createTime}}</div>
                        </div>
                        <div class="order-info">
                            <div style="margin-bottom: 15px">单价&nbsp;<span style="color: #333">{{list.tradePrice}} CNY</span></div>
                            <div style="margin-bottom: 15px">预付总额&nbsp;<span style="color: #333">{{list.totalPrice}} CNY</span></div>
                            <div>预计获得&nbsp;<span style="color: #333">{{list.tradeNum}} QHR</span></div>
                        </div>
                        <div class="pending-payment-details">
                            <div class="pending-payment-details-tiem" >剩余时间&nbsp;{{trans_time(list.tradeCreateTime)}}</div>
                            <div class="order-info-details" :class="{'wait-for' : list.orderTradeStatus == 2}" v-open-win="{orderid:list.orderNo,status:list.orderTradeStatus}" vurl="pendingpayment">{{list.orderTradeStatus == 1 ? '待付款' : '等待中'}}</div>
                        </div>
                    </li>
                </ul>
                <ul class="pending-payment" v-show="state==3">
                    <li class="change-order-li" style="margin-bottom: 12px" v-for='(data, index) in receivable_con' :key="index">
                        <div class="stats-head">
                            <div>
                                <div class="stats-head-zi">{{hide_name_two(data.sellNickname)}}</div>
                                <div class="stats-head-name">{{hide_name(data.sellNickname)}}</div>
                            </div>
                            <div class="stats-order-time">{{data.createTime}}</div>
                        </div>
                        <div class="order-info">
                            <div style="margin-bottom: 15px">单价&nbsp;<span style="color: #333">{{data.tradePrice}}CNY</span></div>
                            <div style="margin-bottom: 15px">委托中&nbsp;<span style="color: #333">{{data.tradeNum}} QHR(含手续费)</span></div>
                            <div>预计获得&nbsp;<span style="color: #333">{{data.totalPrice}} CNY</span></div>
                        </div>
                        <div class="pending-payment-details">
                            <div class="pending-payment-details-tiem">剩余时间&nbsp;{{trans_time(data.tradeCreateTime)}}</div>
                            <div class="order-info-details" :class="{'wait-for' : data.orderTradeStatus == 2}" v-open-win="{orderid:data.orderNo,status:data.orderTradeStatus}" vurl="invoicing">{{data.orderTradeStatus == 1 ? '待收款' : '待确认'}}</div>
                        </div>
                    </li>
                </ul>
                <ul class="pending-payment" v-show="state==4">
                    <li class="change-order-li" style="margin-bottom: 12px" v-for="(list, index) in complete_con" :key="index">
                        <div class="stats-head">
                            <div>
                                <div class="stats-head-zi">{{list.orderType == 1? hide_name_two(list.buyNickname) : hide_name_two(list.sellNickname)}}</div>
                                <div class="stats-head-name">{{list.orderType == 1? hide_name(list.buyNickname) : hide_name(list.sellNickname)}}</div>
                            </div>
                            <div class="stats-order-time">{{list.createTime}}6</div>
                        </div>
                        <div class="order-info">
                            <div style="margin-bottom: 15px">单价&nbsp;<span style="color: #333">{{list.tradePrice}} CNY</span></div>
                            <div style="margin-bottom: 15px" v-if="list.orderType == 1">总价&nbsp;<span style="color: #333">{{list.totalPrice}}CNY</span></div>
                            <div style="margin-bottom: 15px" v-if="list.orderType == 2">数量&nbsp;<span style="color: #333">{{list.tradeNum}}QHR</span></div>
                            <div>以获取&nbsp;<span style="color: #333">{{list.orderType == 1? list.tradeNum : list.totalPrice}} {{list.orderType == 1? 'QHR' : 'CNY'}}</span></div>
                        </div>
                        <div class="pending-payment-details">
                            <div class="pending-payment-details-tiem"></div>
                            <div class="order-info-details wait-for" v-open-win="{orderid:list.orderNo,status:list.orderType}" vurl="buycompleted">{{list.orderType == 1? '买入详情' : '卖出详情'}}</div>
                        </div>
                    </li>
                </ul>
                <ul class="pending-payment" v-show="state==5">
                    <li class="change-order-li" style="margin-bottom: 12px" v-for="(details, index) in cancel_con">
                        <div class="stats-head">
                            <div>
                                <div class="stats-head-zi">{{details.orderType == 1 ? hide_name_two(details.buyNickname) : hide_name_two(details.sellNickname)}}</div>
                                <div class="stats-head-name">{{details.orderType == 1 ? hide_name(details.buyNickname) : hide_name(details.sellNickname)}}</div>
                            </div>
                            <div class="stats-order-time">{{details.createTime}}</div>
                        </div>
                        <div class="order-info">
                            <div style="margin-bottom: 15px">单价&nbsp;<span style="color: #333">{{details.tradePrice}}CNY</span></div>
                            <div style="margin-bottom: 15px">{{details.orderType == 1 ? '数量' : '总价'}}&nbsp;<span style="color: #333">{{details.orderType == 1 ? details.tradeNum : details.totalPrice}}{{details.orderType == 1 ? 'QHR' : 'CNY'}}</span></div>
                            <div>{{details.orderType == 1 ? '未支付' : '已退回 '}}&nbsp;<span style="color: #333">{{details.orderType == 1 ? details.totalPrice : details.tradeNum}}{{details.orderType == 1 ? 'CNY' : 'QHR(含手续费)'}}</span></div>
                        </div>
                        <div class="finish-bg">
                            <div class="border-none" :class="{'cancel-color' : details.orderType == 2}" v-open-win="{orderid:details.orderNo,status:details.orderType}" vurl="buycancel">{{details.orderType == 1 ? '买入已超时' : '卖出已超时'}}</div>
                        </div>
                    </li>
                </ul>
                <div class="appeal">
                    <div class="appeal-runing" v-open-win vurl="appeal">申诉中</div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>
<script src="../../script/components.js"></script>
<script type="text/javascript" src="../../script/jquery.js"></script>
<script type="text/javascript" src="../../script/vant.min.js"></script>

<script>
    var vm,
        wx,
        purchase_list,
        purchase_con,
        pending_payment,
        pending_payment_list,
        pending_payment_con,
        receivable_list,
        receivable_con,
        complete_list,
        complete_con,
        cancel_list,
        cancel_con,
    apiready = function () {
        setBSImg();
        new Vue({
            el: '#blank'
        })
        var details={
          "agtVer":1,
          "clientVer":1,
          "ctime":201911071802959,
          "cctime":201911071802959,
          "sign":"abcdefg",
          "token":getPrefs('token'),
          "pageNumber":1,
          "pageSize":10,
        }
        var base = new Base64();
        var	item=base.encode(JSON.stringify(details))
        var data = {
            jsonData:item,
        };
        var callback=function(ret){
            var base = new Base64();
            var purchase_list = base.decode(ret.content.jsonData);
            purchase_list =JSON.parse( purchase_list);
            // content_list=JSON.parse(data_list);
            purchase_con = purchase_list.coList;
            console.log(JSON.stringify(purchase_con));
            initApp();
        }
        pinet.post(APIURLP+'/play/od/getBuyData',data, callback);
        api.parseTapmode();
        addListeners();
    };

    function initApp() {
        // var isBigImg = Vue.BSImg == 'big';
        vm = new Vue({
            el: '#app',
            data: {
                active: 2,
                state:1,
                purchase_list:purchase_list,
                purchase_con:purchase_con,
                pending_payment:pending_payment,
                pending_payment_list:pending_payment_list,
                pending_payment_con:pending_payment_con,
                receivable_list:receivable_list,
                receivable_con:receivable_con,
                complete_list:complete_list,
                complete_con:complete_con,
                cancel_list:cancel_list,
                cancel_con:cancel_list,
            },
            computed: {
            },
            methods: {
                hide_name_two:function(name){
                  return new Array(name.length).join('') + name.substr(-1);
                },
                hide_name:function(name){
                  return new Array(name.length).join('*') + name.substr(-1);
                },
                trans_time:function(time){
                  var date = new Date(time);
                  var time = date.getTime()/1000;
                  var nowtime = (new Date())/1000;
                  if(nowtime>(time+30*60)){
                    return '0秒';
                  }
                  var diff = parseInt(time+30*60-nowtime);
                  console.log(diff);
                  var int_time = parseInt(diff/60);

                  return int_time+"分钟"+(diff-int_time*60)+'秒';

                },
                cancel_order:function(value){
                  var details={
                    "agtVer":1,
                    "clientVer":1,
                    "ctime":201911071802959,
                    "cctime":201911071802959,
                    "sign":"abcdefg",
                    "token":getPrefs('token'),
                    "orderNo":value,
                  }
                  var base = new Base64();
                  var	item=base.encode(JSON.stringify(details))
                  var data = {
                      jsonData:item,
                  };
                  var callback=function(ret){
                      api.toast({
                          msg: '取消成功',
                          duration: 2000,
                          location: 'middle'
                      });
                      vm.relode_list();
                  }
                  pinet.post(APIURLP+'/play/od/upCancelData',data, callback);
                },
                relode_list:function(){
                  var details={
                    "agtVer":1,
                    "clientVer":1,
                    "ctime":201911071802959,
                    "cctime":201911071802959,
                    "sign":"abcdefg",
                    "token":getPrefs('token'),
                    "pageNumber":1,
                    "pageSize":10,
                  }
                  var base = new Base64();
                  var	item=base.encode(JSON.stringify(details))
                  var data = {
                      jsonData:item,
                  };
                  var callback=function(ret){
                    var base = new Base64();
                    var purchase_list = base.decode(ret.content.jsonData);
                    vm.purchase_list =JSON.parse( purchase_list);
                    // content_list=JSON.parse(data_list);
                    vm.purchase_con = vm.purchase_list.coList;
                    console.log(JSON.stringify(vm.purchase_list));
                  }
                  pinet.post(APIURLP+'/play/od/getBuyData',data, callback);
                },
                relode_list_two:function(){
                  var details={
                    "agtVer":1,
                    "clientVer":1,
                    "ctime":201911071802959,
                    "cctime":201911071802959,
                    "sign":"abcdefg",
                    "token":getPrefs('token'),
                    "pageNumber":1,
                    "pageSize":10,
                  }
                  var base = new Base64();
                  var	item=base.encode(JSON.stringify(details))
                  var data = {
                      jsonData:item,
                  };
                  var callback=function(ret){
                    var base = new Base64();
                    var pending_payment_list = base.decode(ret.content.jsonData);
                    vm.pending_payment_list =JSON.parse(pending_payment_list);
                    vm.pending_payment_con = vm.pending_payment_list.coList
                    console.log(JSON.stringify(vm.pending_payment_list));
                  }
                  pinet.post(APIURLP+'/play/od/getUnpaidData',data, callback);
                },
                relode_list_three:function(){
                  var details={
                    "agtVer":1,
                    "clientVer":1,
                    "ctime":201911071802959,
                    "cctime":201911071802959,
                    "sign":"abcdefg",
                    "token":getPrefs('token'),
                    "pageNumber":1,
                    "pageSize":10,
                  }
                  var base = new Base64();
                  var	item=base.encode(JSON.stringify(details))
                  var data = {
                      jsonData:item,
                  };
                  var callback=function(ret){
                    var base = new Base64();
                    var receivable_list = base.decode(ret.content.jsonData);
                    vm.receivable_list =JSON.parse( receivable_list);
                    vm.receivable_con = vm.receivable_list.coList
                    console.log(JSON.stringify(vm.receivable_con));
                  }
                  pinet.post(APIURLP+'/play/od/getReceivableData',data, callback);
                },
                changestate:function(state){
                  this.state = state;
                  if(state == 1){
                    var details={
                      "agtVer":1,
                      "clientVer":1,
                      "ctime":201911071802959,
                      "cctime":201911071802959,
                      "sign":"abcdefg",
                      "token":getPrefs('token'),
                      "pageNumber":1,
                      "pageSize":10,
                    }
                    var base = new Base64();
                    var	item=base.encode(JSON.stringify(details))
                    var data = {
                        jsonData:item,
                    };
                    var callback=function(ret){
                      var base = new Base64();
                      var purchase_list = base.decode(ret.content.jsonData);
                      vm.purchase_list =JSON.parse(purchase_list);
                      // content_list=JSON.parse(data_list);
                      vm.purchase_con = vm.purchase_list.coList;
                      console.log(JSON.stringify(vm.purchase_list));
                    }
                    pinet.post(APIURLP+'/play/od/getBuyData',data, callback);
                  }
                  if(state == 2){
                    console.log('11')
                    var details={
                      "agtVer":1,
                      "clientVer":1,
                      "ctime":201911071802959,
                      "cctime":201911071802959,
                      "sign":"abcdefg",
                      "token":getPrefs('token'),
                      "pageNumber":1,
                      "pageSize":10,
                    }
                    var base = new Base64();
                    var	item=base.encode(JSON.stringify(details))
                    var data = {
                        jsonData:item,
                    };
                    var callback=function(ret){
                      var base = new Base64();
                      var pending_payment_list = base.decode(ret.content.jsonData);
                      vm.pending_payment_list =JSON.parse(pending_payment_list);
                      vm.pending_payment_con = vm.pending_payment_list.coList
                      console.log(JSON.stringify(vm.pending_payment_list));
                    }
                    pinet.post(APIURLP+'/play/od/getUnpaidData',data, callback);
                  }
                  if(state == 3){
                    console.log(getPrefs('member_id'))
                    var details={
                      "agtVer":1,
                      "clientVer":1,
                      "ctime":201911071802959,
                      "cctime":201911071802959,
                      "sign":"abcdefg",
                      "token":getPrefs('token'),
                      "pageNumber":1,
                      "pageSize":10,
                    }
                    var base = new Base64();
                    var	item=base.encode(JSON.stringify(details))
                    var data = {
                        jsonData:item,
                    };
                    var callback=function(ret){
                      var base = new Base64();
                      var receivable_list = base.decode(ret.content.jsonData);
                      vm.receivable_list =JSON.parse( receivable_list);
                      vm.receivable_con = vm.receivable_list.coList
                      console.log(JSON.stringify(vm.receivable_con));
                    }
                    pinet.post(APIURLP+'/play/od/getReceivableData',data, callback);
                  }
                  if(state == 4){
                    console.log(getPrefs('member_id'))
                    var details={
                      "agtVer":1,
                      "clientVer":1,
                      "ctime":201911071802959,
                      "cctime":201911071802959,
                      "sign":"abcdefg",
                      "token":getPrefs('token'),
                      "pageNumber":1,
                      "pageSize":10,
                    }
                    var base = new Base64();
                    var	item=base.encode(JSON.stringify(details))
                    var data = {
                        jsonData:item,
                    };
                    var callback=function(ret){
                      var base = new Base64();
                      var complete_list = base.decode(ret.content.jsonData);
                      vm.complete_list =JSON.parse(complete_list);
                      vm.complete_con = vm.complete_list.coList
                      console.log(JSON.stringify(vm.complete_list));
                    }
                    pinet.post(APIURLP+'/play/od/getFinishData',data, callback);
                  }
                  if(state == 5){
                    console.log(getPrefs('member_id'))
                    var details={
                      "agtVer":1,
                      "clientVer":1,
                      "ctime":201911071802959,
                      "cctime":201911071802959,
                      "sign":"abcdefg",
                      "token":getPrefs('token'),
                      "pageNumber":1,
                      "pageSize":10,
                    }
                    var base = new Base64();
                    var	item=base.encode(JSON.stringify(details))
                    var data = {
                        jsonData:item,
                    };
                    var callback=function(ret){
                      var base = new Base64();
                      var cancel_list = base.decode(ret.content.jsonData);
                      vm.cancel_list =JSON.parse(cancel_list);
                      vm.cancel_con = vm.cancel_list.coList;
                      console.log(JSON.stringify(vm.cancel_list));
                    }
                    pinet.post(APIURLP+'/play/od/getOverTimeData',data, callback);
                  }
                },
            },
            watch: {

            },
        })
    }


    function addListeners() {
        api.addEventListener({
            name: 'viewappear'
        }, function () {
            vm.relode_list_two();
            vm.relode_list_three();
        });
        api.addEventListener({
            name: 'reload'
        }, function () {
            window.location.reload();
        });
    }


</script>

</html>
